<template>
	<view class="baseForm">
		<!-- 列表部分 -->
		<view style="padding-top: 5px">
			<view class="flex justify-between align-center" style="padding: 0 20px; margin-bottom: 10px" >
				<view class="">
					<u-icon @click="leftBtn" :name="dataLeft ? 'play-left-fill' : 'play-left'" color="#000a7b"></u-icon>
				</view>
				<view class="">
					{{ dataTime }}
				</view>
				<view class="">
					<u-icon @click="rightBtn" :name="dataRight ? 'play-right-fill' : 'play-right'" n color="#000a7b"></u-icon>
				</view>
			</view>
			<view v-show="!tableList.length && !tableLoading" class="flex justify-center font-16" style="padding: 20px 0 0px 0">
				<u-empty mode="list" iconSize="70"></u-empty>
			</view>
			<u-loading-icon class="flex justify-center mt-20" textSize="18" v-show="tableLoading"></u-loading-icon>
			<!-- 时间键 -->
			
			<view v-if="tableList.length" style="padding-bottom: 30px">
				<u-list ref="tableScroll" class="list" :pagingEnabled="false" :scrollable="false" height="auto">
					<u-list-item v-for="(item, index) in tableList" :key="item.id" @click="jumpUrl(item)">
						<view class="card">
							<view class="flex record-title u-flex-items-center">
								<view style="word-break: break-all; color: #333; font-size: 16px; font-weight: 700">{{ item.processingOrderNumber }}</view>
								<u-tag :text="useDictionaryStore().filterDictName('outboundStatus', item.taskStatus ?? '')" size="mini" :type="changeTypeColor(useDictionaryStore().filterDictName('outboundStatus', item.taskStatus ?? ''))"></u-tag>
							</view>
							<view class="flex flex-col justify-between flex-1 h-full record-content-body" style="padding-bottom: 0px">
								<view class="record-content">
									<view class="record-item" v-show="item.processesClassification">
										<text>工序</text>
										<text>{{ useDictionaryStore().filterDictName('ProcessType', item.processesClassification ?? '') ?? '' }}</text>
									</view>
									<view class="record-item" v-show="item.figureNumber">
										<text>产品图号</text>
										<text>{{ item.figureNumber ?? '' }}</text>
									</view>
									<view class="record-item" v-show="item.materialName">
										<text>产品名称</text>
										<text>{{ item.materialName ?? '' }}</text>
									</view>
									<view class="record-item" v-show="item.equipName">
										<text>炉批次号</text>
										<text>{{ item.equipName ?? '' }}</text>
									</view>
									<view class="record-item">
										<text>模数</text>
										<text>{{ item.mouldQuantity ?? '' }}</text>
									</view>
									<view class="record-item">
										<text>计划数量</text>
										<text>{{ item.planQuantity ?? '' }}</text>
									</view>
									<view class="record-item" v-if="item.locationName">
										<text>模具位置</text>
										<text>{{ item.locationName ?? '' }}</text>
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" bottom="20" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw,computed } from 'vue';
import { http } from '@/utils/http';
import { onPageScroll, onShow, onLoad } from '@dcloudio/uni-app';
import { mockData } from '@/pages/eam/mold/enterWarehouse/index.ts';
import UploadImage from '@/components/upload-image-ssr.vue';
import ScanBar from '@/components/scan-bar/index.vue';
import { toScanCode } from '@/components/hs-scancode/scan.js';
import dayjs from 'dayjs';
import { useDictionaryStore } from "@/stores/useDictionaryStore";
import { useEamStore } from '@/stores/useEamStore';
// 刚进来 页面置顶
onLoad(() => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 0
	});
});

onShow(()=>{
	getDeviceInfo();
})

// 监听页面到顶部距离
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});
const tableLoading = ref(false);
const tableList = ref([]);
// 获取模具信息（接口请求）
async function getDeviceInfo() {
	tableLoading.value = true;
	const data: any = await http({
		method: 'POST',
		url: `/eam/eammouldtaskinfo/getList`,
		data: {
			planDate: dayjs(dataTime.value).format('YYYY-MM-DD HH:mm:ss')
		}
	}).catch(() => {
		tableLoading.value = false;
	});
	if (data?.code == 200) {
		tableList.value = data.data;
		tableLoading.value = false;
	}
}
const dataLeft = ref(false);
const dataRight = ref(false);

const currentDate = ref(dayjs());
const dataTime = computed(() => currentDate.value.format('YYYY-MM-DD'));

const rightBtn = () => {
	dataLeft.value = false;
	dataRight.value = true;
	currentDate.value = currentDate.value.add(1, 'day');
	getDeviceInfo()
};
const leftBtn = () => {
	dataLeft.value = true;
	dataRight.value = false;
	currentDate.value = currentDate.value.add(-1, 'day');
	getDeviceInfo()
};


function jumpUrl(item) {
	uni.navigateTo({
		url: `/pages/eam/mold/outWarehouse/outWarehouseEdit?id=${item.id}`,
		fail: () => {
			uni.showToast({
				title: '敬请期待',
				icon: 'error'
			});
		}
	});
}

function changeTypeColor (text) {
	if (text.includes('已')) {
		return 'success'
	} else {
		return 'primary'
	}
}





</script>

<style lang="scss" scoped>
.baseForm {
	padding: $uni-page-padding;
	background-color: #fbfbff;
	min-height: calc(100vh - 44px);

	.u-form {
		:deep(.u-form-item__body) {
			padding: 5px 0;
		}

		.u-input {
			border: 1px solid $uni-input-border-color;
		}

		.scan-bar {
			display: flex;
			flex: 1;
		}
	}

	.u-line {
		padding: 8px 0;
	}

	.search {
		width: 100%;
		margin-top: 7px;

		.u-button {
			flex: 1;
			height: 36px;
			line-height: 36px;
			border-radius: 6px;
		}

		.submit_btn {
			margin-left: 10px;
			box-shadow: none;
			:deep(.u-button__text) {
				font-size: 16px !important;
			}
		}

		.cancel_btn {
			border: 1px solid #999;

			:deep(.u-button__text) {
				font-size: 16px !important;
			}
		}
	}

	.card {
		background-color: #fff;
		margin: 3px 0px 5px;
		border-radius: 8px;
		padding: 6px 10px;
		transition: all 300ms ease;
		border: 1px solid silver !important;
	}

	.record-title {
		display: flex;
		justify-content: space-between;
		margin: 7px 0 4px 0;
		// color: $primary-color;
		color: #333 !important;
		word-break: break-all;

		uni-text:nth-child(1) {
			font-weight: bold;
			font-size: 16px;
		}

		uni-text:nth-child(2) {
			// font-weight: bold;
			font-size: 16px;
			min-width: 60px;
			text-align: right;
		}
		
		:deep(.u-tag__text--mini) {
			font-size: 13px;
			padding: 1px 3px 0;
		}
	}

	.record-item {
		margin: 5px 0 !important;
		// color: #777 !important;
		// color: $primary-color;
		color: #333 !important;
		display: flex;
		align-items: end;
		font-size: 15px;

		> :first-child {
			min-width: 63px;
		}

		:deep(.u-tag__text--mini) {
					font-size: 13px;
			padding: 1px 3px 0;
		}
	}

	:deep(.line1) {
		display: flex !important;

		span:nth-last-child(1) {
			display: inline-block !important;
			white-space: nowrap !important;
			text-overflow: ellipsis !important;
			word-break: break-word !important;
			overflow: hidden !important;
		}
	}
}
.danger-btn1 {
	// 更深的红色，增强警示性
	color: #fff;
	border: none;
	border-radius: 0 6px 6px 0; // 更大的圆角
	padding: 0px 16px; // 更舒适的内边距
	margin-left: -3px;
	height: 38px;
	font-size: 15px;
	font-weight: bold; // 加粗文字
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); // 添加阴影
	transition: all 0.3s ease; // 平滑过渡效果
}
</style>
